<template>
  <div>
    <div>
      <el-row :gutter="15">
        <el-col :xs="24" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-white">
            <div class="header_card">
              <span class="total">总销售额</span>
              <span class="num">￥15920</span>
            </div>
            <div class="middle_card">
              <ul class="count-sales__cop">
                <li>
                  <span>同周比</span>
                  <div class="fall">
                    <i class="el-icon-bottom-right"></i>
                    <span> -4%</span>
                  </div>
                </li>
                <li>
                  <span>日同比</span>
                  <div class="rise">
                    <i class="el-icon-top-right"></i>
                    <span>+7%</span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="footer_card">
              <span class="day_money">日销售额</span>
              <span class="day_money_m">￥1298.01</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-white">
            <div class="header_card">
              <span class="total">总访问量</span>
              <span class="num">8846</span>
            </div>
            <div class="middle_card" ref="container_middle_card1"></div>
            <div class="footer_card">
              <span class="day_money">日访问量</span>
              <span class="day_money_m">1351</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-white">
            <div class="header_card">
              <span class="total">支付笔数</span>
              <span class="num">6560</span>
            </div>
            <div class="middle_card" ref="container_middle_card2"></div>

            <div class="footer_card">
              <span class="day_money">转化率</span>
              <span class="day_money_m">60%</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-white">
            <div class="header_card">
              <span class="total">总销售数</span>
              <span class="num">15920</span>
            </div>
            <div class="middle_card card4" id="container_middle_card3">
              <el-progress :percentage="50" color="#4165d7"></el-progress>
            </div>

            <div class="middle_card">
              <ul class="count-sales__cop">
                <li>
                  <span>同周比</span>
                  <div class="fall">
                    <i class="el-icon-bottom-right"></i>
                    <span> -4%</span>
                  </div>
                </li>
                <li>
                  <span>日同比</span>
                  <div class="rise">
                    <i class="el-icon-top-right"></i>
                    <span>+7%</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :xs="24" :md="12" :lg="14">
          <div class="card bg-white">
            <div class="tab_header">
              <ul>
                <li class="active">销售额</li>
                <li>访问量</li>
              </ul>
              <span class="tab-chart__year">2020 </span>
            </div>
            <div class="map_card4" ref="container_middle_card3"></div>
          </div>
        </el-col>
        <el-col :xs="24" :md="12" :lg="10">
          <div class="card bg-white">
            <div class="sales-rank__header">门店销售额排名</div>
            <div class="sales-rank__container">
              <div class="sales-rank__filter">
                <ul>
                  <li class="active">今日</li>
                  <li>本周</li>
                  <li>本月</li>
                  <li>全年</li>
                </ul>

                <el-date-picker
                  :size="'small'"
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
              <ul class="sales-rank__list">
                <li>
                  <span>1</span>
                  <span>北京市朝阳区三里屯路</span>
                  <span>323201</span>
                </li>
                <li>
                  <span>2</span>
                  <span>北京市朝阳区建国路-华贸购物中心</span>
                  <span>278442</span>
                </li>
                <li>
                  <span>3</span>
                  <span>北京市朝阳区朝阳北路</span>
                  <span>202368</span>
                </li>
                <li>
                  <span>4</span>
                  <span>北京市东城区王府井大街</span>
                  <span>156320</span>
                </li>
                <li>
                  <span>5</span>
                  <span>北京市西城区西单北大街-大悦城</span>
                  <span>98852</span>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :xs="24" :md="12" :lg="14">
          <div class="card bg-white card6">
            <div class="hot-search__header">线上热门搜索</div>
            <el-row :gutter="20">
              <el-col :xs="24" :md="12">
                <div class="header_card header_card2">
                  <div>
                    <span class="total">搜索用户数</span> <span class="num">1242</span>
                  </div>

                  <div class="rise">+7%</div>
                </div>

                <div class="middle_card" ref="container_middle_card4"></div
              ></el-col>
              <el-col :xs="24" :md="12">
                <div class="header_card header_card2">
                  <div>
                    <span class="total">关注用户数</span>
                    <span class="num">365</span>
                  </div>

                  <div class="rise">+2%</div>
                </div>

                <div class="middle_card" ref="container_middle_card5"></div
              ></el-col>
            </el-row>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="num" label="排名"> </el-table-column>
              <el-table-column prop="keyword" label="搜索关键字"> </el-table-column>
              <el-table-column prop="number" label="用户数"> </el-table-column>
              <el-table-column prop="add" label="周涨幅"> </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :xs="24" :md="12" :lg="10">
          <div class="card bg-white card6">
            <div class="category-ratio__header">销售额类别占比</div>
            <div class="map_card6" ref="container_middle_card6"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped lang="scss">
.bg-white {
  background-color: #fff;
}

.header_card {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
}

.footer_card {
  display: flex;
  align-items: center;
  height: 50px;
  border-top: 1px solid #f7f7f7;
  font-size: 12px;
  margin: 0 5px;
  padding: 0 15px;
  box-sizing: border-box;
}

.day_money {
  font-size: 12px;
  margin-right: 10px;
}

.card {
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #000;
  .tab_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
  }
  li {
    list-style: none;
    float: left;
    margin-right: 20px;
    font-size: 15px;
    color: #dbdbdb;
    cursor: pointer;
  }
  .active {
    color: #000;
    font-weight: 700;
  }
  .tab-chart__year {
    font-size: 14px;
    position: relative;
    &::before {
      display: block;
      content: "";
      height: 8px;
      width: 8px;
      border-radius: 8px;
      background-color: #000;
      position: absolute;
      left: -15px;
      top: 4px;
    }
  }
}

.fall {
  color: #13ae7c;
}

.rise {
  color: #f21e37;
}

.count-sales__cop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}

.count-sales__cop li {
  display: flex;
  list-style: none;
  flex: 1;
  color: #d8d8d8;
}

.middle_card {
  padding: 0 20px;
  height: 50px;
  width: 100%;
}

.card4 {
  padding-top: 15px;
  padding-right: 10px;
  box-sizing: border-box;
}

.total {
  font-size: 12px;
}

.header_card .num {
  font-size: 18px;
  font-weight: 700;
  margin-left: 10px;
}

.grid-content {
  display: block;
  min-height: 165px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #000;
}
//门店销售
.sales-rank__header {
  display: flex;
  align-items: center;
  height: 50px;
  font-size: 15px;
  font-weight: 700;
  padding: 0 20px;
}
.sales-rank__container {
  padding: 0 20px;
}
.sales-rank__filter {
  ul {
    display: flex;
    align-items: center;
    margin-right: 20px;
    flex: 1;
    max-width: 220px;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  li {
    list-style: none;
    font-size: 14px;
    cursor: pointer;
    color: #d8d8d8;
    white-space: nowrap;
    margin-right: 10px;
    flex: 1;
  }
  .active {
    color: #000;
  }
}
.sales-rank__list {
  height: 260px;
  li:nth-last-child(n + 3) span:first-child {
    background-color: #000;
    color: #fff;
  }
  li {
    display: flex;
    width: 100%;
    align-items: center;
    height: 51px;
    list-style: none;
    font-size: 13px;
    cursor: pointer;
    span {
      color: #000;
    }
    span:first-child {
      display: inline-block;
      height: 14px;
      width: 14px;
      border-radius: 14px;
      text-align: center;
      line-height: 14px;
      font-size: 12px;
    }
    span:nth-child(2) {
      flex: 1;
      margin: 0 10px;
      letter-spacing: 0.5px;
      color: #222;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }
}
//线上热门搜索
.hot-search__header,
.category-ratio__header {
  display: flex;
  align-items: center;
  height: 50px;
  font-size: 15px;
  font-weight: 700;
  padding: 0 20px;
}
.header_card2 {
  justify-content: space-between;
  align-items: center;
  .rise {
    font-size: 15px;
  }
}
.map_card4 {
  height: 300px;
  width: 100%;
}
.map_card6 {
  height: 100%;
  width: 100%;
}
.card6{
    height: 453px;
}
.cell {
  background-color: #ebeef5;
}
</style>

<style >
.el-main {
	padding-top: 0;
}
</style>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      option1: {
        width: "100%",
        title: {},
        tooltip: {},
        xAxis: {
          show: false,
          boundaryGap: false,
          type: "category",
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            type: "line",
            data: [140, 232, 101, 264, 90, 340, 250],
            showSymbol: false,
            stack: "Total",
            smooth: 0.6,
          },
        ],
      },
      option2: {
        width: "100%",
        xAxis: {
          show: false,
          type: "category",
        },
        yAxis: {
          minInterval: 5,
          show: false,
          type: "value",
        },
        series: [
          {
            data: [1, 5, 2, 3, 6, 0, 10, 9],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              // color: "#4165d7",
            },
          },
        ],
      },
      option3: {
        width: "100%",
        tooltip: {},
        xAxis: {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          minInterval: 20,
          type: "value",
        },
        series: [
          {
            data: [65, 83, 70, 3, 14, 85, 75, 13, 21, 33, 96, 47],
            type: "bar",
            barWidth: 16,
            showBackground: true,
            color:"#4267dd",
            backgroundStyle: {
              // color: "#4165d7",
            },
          },
        ],
      },
      option6: {
        width: "100%",
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "15%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["65%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
            //   borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 335,
                name: "手机",
                tooltip: {
                  formatter: "{b} : {c} ({d}%)",
                },
              },
              {
                value: 310,
                name: "相机",
                tooltip: {
                  formatter: "{b} : {c} ({d}%)",
                },
              },
              {
                value: 234,
                name: "耳机",
                tooltip: {
                  formatter: "{b} : {c} ({d}%)",
                },
              },
              {
                value: 135,
                name: "音箱",
                tooltip: {
                  formatter: "{b} : {c} ({d}%)",
                },
              },
              {
                value: 500,
                name: "手表",
                tooltip: {
                  formatter: "{b} : {c} ({d}%)",
                },
              },
            ],
            center: ['50%', '40%'],
          },
          
        ],
      },
      tableData: [
        {
          num: "1",
          keyword: "无线耳机",
          number: "983",
          add: "5",
        },
        {
          num: "2",
          keyword: "运动耳机",
          number: "763",
          add: "-3",
        },
        {
          num: "3",
          keyword: "蓝牙音箱",
          number: "328",
          add: "7",
        },
        {
          num: "4",
          keyword: "4k显示屏",
          number: "144",
          add: "4",
        },
        {
          num: "5",
          keyword: "罗技G530",
          number: "121",
          add: "-1",
        },
      ],
      value1: "",
    };
  },
  methods: {
    initCharts() {
      this.myChart1 = echarts.init(this.$refs.container_middle_card1);
      this.myChart2 = echarts.init(this.$refs.container_middle_card2);
      this.myChart3 = echarts.init(this.$refs.container_middle_card3);
      this.myChart4 = echarts.init(this.$refs.container_middle_card4);
      this.myChart5 = echarts.init(this.$refs.container_middle_card5);
      this.myChart6 = echarts.init(this.$refs.container_middle_card6);
      this.myChart1.setOption(this.option1);
      this.myChart2.setOption(this.option2);
      this.myChart3.setOption(this.option3);
      this.myChart4.setOption(this.option1);
      this.myChart5.setOption(this.option1);
      this.myChart6.setOption(this.option6);
    },
    resize() {
      this.myChart1.resize();
      this.myChart2.resize();
      this.myChart3.resize();
      this.myChart4.resize();
      this.myChart5.resize();
      this.myChart6.resize();
    },
  },
  mounted() {
    this.initCharts();
    window.addEventListener("resize", this.resize);
  },
};
</script>
